<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="bar"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const chartData = ref({});
const opts = ref({
  color: ["#d889c6"],
  padding: [15,30,0,5],
  enableScroll: false,
  legend: {},
  xAxis: {
    boundaryGap: "justify",
    disableGrid: false,
    min: 0,
    axisLine: false,
    max: 70
  },
  yAxis: {},
  extra: {
    bar: {
      type: "stack",
      width: 30,
      meterBorde: 1,
      meterFillColor: "#FFFFFF",
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      categoryGap: 1
    }
  }
});

// 生命周期钩子调整
onMounted(() => {
  getServerData();
});

// 方法改为函数声明
const getServerData = () => {
  setTimeout(() => {
    const res = {
      categories: ["0"],
      series: [
        {
          // name: "30%",
		  name:"中度压力 ",
          data: [35]
        }
      ]
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height:100%;
}
</style>